<template>
  <div>
    <van-overlay :show="show">
      <div :class=" getData.type==='input_single' ? 'bind-m-wrapper smallSize' : 'bind-m-wrapper'">
        <div class="bind-m-wrapper-title">{{getData.title}}</div>
        <div v-if="getData.type==='input'">
          <div>
            <input
              autocomplete
              :placeholder="getData.placeholder1"
              v-model="userName"
            />
          </div>
          <div class="bind-m-wrapper_input">
            <input
              :placeholder="getData.placeholder2"
              v-model="number"/>
            <!--suppress JSUnresolvedFunction -->
          </div>
        </div>
        <div v-else-if="getData.type==='textarea'">
          <van-field
            v-model="message"
            type="textarea"
            maxlength="200"
            rows="6"
            :placeholder="getData.placeholder1"
            show-word-limit
          />
        </div>
        <div v-else-if="getData.type==='input_single'">
          <van-field
            v-model="message"
            type="text"
            rows="1"
            maxlength="20"
            show-word-limit
            :placeholder="getData.placeholder1"
          />
        </div>
        <div class="control_panel">
          <div @click="cancel" :class="isPc ? 'pointer' : ''">取消</div>
          <div @click="confirm" :class="isPc ? 'pointer' : ''">确定</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  import {Overlay, Toast} from 'vant'
  import LoginAPI from '../repo/api/LoginAPI'

  Vue.use(Overlay)
  export default {
    userName: 'VantOverLayCommon',
    props: {
      isPc: {
        type: Boolean,
        default: false
      },
      show: {
        type: Boolean,
        default: false
      },
      getData: {
        type: Object,
        default: {},
      }
    },

    watch: {
      authState (nVal) {
        if (nVal === 'counting') {
          this.startCountdown()
        } else {
          this.stopCountdown()
        }
      },
      show(n,o){
        if(n!==o){
          this.userName=''
          this.number=''
          this.message=''
        }
      }
    },
    data () {
      return {
        authState: 'init',
        authTips: '获取验证码',
        countdown: 0,
        countdownHandler: undefined,

        userName: '',
        number: '',
        message: ''
      }
    },
    computed: {
      btnAuth () {
        let authState = this.authState
        if (authState === 'init') {
          return '获取验证码'
        }
        if (authState === 'retry') {
          return '重新获取'
        } else {
          return `${this.countdown}s`
        }
      },
    },
    created () {
      this.authState = 'init'
    },
    destroyed () {
      this.stopCountdown()
    },
    methods: {
      _hasErrorMobile (mobile) {
        return !(mobile && mobile.length === 11 && mobile.startsWith('1'))
      },
      getAuthCode () {
        if (this.authState === 'counting') return
        if (this._hasErrorMobile(this.mobile)) {
          return Toast('请输入正确的手机号码')
        }
        /* 设置setAuthState开始计数 */
        this.authState = 'counting'

        return LoginAPI.getAuthCode(this.mobile)
          .then(_ => {
            Toast('发送成功')
          })
      },
      startCountdown () {
        if (this.countdown > 0) return
        if (this.countdownHandler) return
        this.countdown = 60
        this.countdownHandler = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown = this.countdown - 1
          } else {
            this.authState = 'retry'
            clearInterval(this.countdownHandler)//清除定时器
            this.countdownHandler = null
          }
        }, 1000) //1秒执行一次
      },
      stopCountdown () {
        clearInterval(this.countdownHandler)
        this.countdownHandler = null
      },
      mobileFilter () {
        this.mobile = this.mobile.replace(/[^\d]/g, '')
      },
      confirm () {
        let type = this.getData
        if (this.getData.type === 'input') {
          if(this.userName == ''){
            Toast('请输入正确的姓名')
            return
          }
          if(this.number == ''){
            Toast('请输入正确的身份证号码')
            return
          }
          let sendData = {
            name: this.userName,
            number: this.number,
          }
          this.$emit('showFun', sendData, type)
          return
        }
        this.$emit('showFun', this.message, type)
      },
      cancel () {
        this.$emit('cancelFun', false)
      },
    }

  }
</script>

<style scoped>
  .bind-m-wrapper {
    position: absolute;
    top: calc(50% - 300px / 2);
    background: white;
    left: calc(50% - 300px / 2);
    width: 300px;
    height: 300px;
    padding: 24px 16px;
    box-sizing: border-box;
    border-radius: 10px;
  }


  .bind-m-wrapper-title {
    font-weight: bold;
    font-size: 20px;
  }

  .bind-m-wrapper input {
    height: 48px;
    background: #F7F7F7;
    color: #999999;
    border-radius: 2px;
    width: 100%;
    margin: 24px auto 0px auto;
    text-indent: 16px;
  }

  .bind-m-wrapper_input {
    position: relative;
  }

  #auth {
    position: absolute;
    top: 54%;
    right: 10px;
    font-size: 14px;
    color: #1DA1F2;
  }

  .control_panel {
    display: flex;
    justify-content: flex-end;
  }

  .control_panel > div {
    margin-left: 40px;
    margin-top: 24px;
  }

  .control_panel > div:nth-of-type(2) {
    color: #1DA1F2;
  }

  .van-field-style {
    height: 250px;
    border: 1px red solid;
  }
  .smallSize{
    height: 180px;
  }
  .van-cell{
    padding-left: 0px !important;
  }
</style>
